<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('补卡申请审批')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-colck-edit" th:object="${hrFillClock}">
            <input name="id" th:field="*{id}" type="hidden">
            <input name="taskId" th:field="*{taskId}" type="hidden">
            <input type="hidden" name="p_COM_comment" />
            <div class="form-group">
                <label class="col-sm-3 control-label">员工姓名：</label>
                <div class="col-sm-8">
                    <input name="applyUserName" th:field="*{applyUserName}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">部门：</label>
                <div class="col-sm-8">
                    <input name="applyUserName" th:field="*{deptName}" class="form-control" type="text" readonly>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">缺卡日期：</label>
                <div class="col-sm-8">
                    <input name="applyUserName" th:field="*{classDateStr}" class="form-control" type="text" readonly>
                </div>
            </div>

           <!-- <div class="form-group">
                <label class="col-sm-3 control-label">缺卡日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="classDate" th:value="${#dates.format(hrFillClock.classDate, 'yyyy-MM-dd')}"  readonly="readonly"  class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label">补卡时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="dates" th:value="${#dates.format(hrFillClock.dates, 'yyyy-MM-dd HH:mm')}"  readonly="readonly"  class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">申请时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="applyTime" th:value="${#dates.format(hrFillClock.applyTime, 'yyyy-MM-dd HH:mm')}" class="form-control" readonly="readonly" type="text" disabled>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">原因：</label>
                <div class="col-sm-8">
                    <textarea name="reason" class="form-control" readonly>[[*{reason}]]</textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">相关证明：</label>
                <div class="col-sm-8">
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr><th>图片</th>

                                <!--<th>操作</th>-->
                            </tr></thead>
                            <tbody id="demoListOld" >
                            <tr th:each="img : *{imgUrls}"  th:id="${#strings.substring(img,30,45)}">
                                <td><img  th:onclick="$.table.imageViewSimp([[${img}]])" th:src="${img}" ></td>

                                <!--<td>&#45;&#45;</td>-->
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <hr />
            <div class="form-group taskItem">
                <label class="col-sm-3 control-label" for="approved">审批意见：</label>
                <div class="col-sm-8">
                    <select name="p_B_approved" id="approved" class="form-control m-b">
                        <option value="true">同意</option>
                        <option value="false">拒绝</option>
                    </select>
                </div>
            </div>
            <div class="form-group taskItem">
                <label class="col-sm-3 control-label">批注：</label>
                <div class="col-sm-8">
                    <textarea name="comment" class="form-control" ></textarea>
                </div>
            </div>
        </form>
    </div>

    <div class="container-div"  style="height: initial;">
        <div class="row">
            <div class="col-sm-12 search-collapse" hidden>
                <form id="role-form">
                    <input type="hidden" id="instanceId" name="instanceId" th:value="${hrFillClock.instanceId}">
                    <div class="select-list">
                        <ul>
                            <li>
                                任务名称：<input type="text" name="activityName"/>
                            </li>
                            <li>
                                办理人ID：<input type="text" name="assignee"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('role-form' , 'bootstrap-table' )"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('role-form' , 'bootstrap-table')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 select-table ">
                <table id="bootstrap-table" ></table>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: select2-js" />
    <script th:inline="javascript">
        var prefix = ctx + "hr/clock";
        $("#form-colck-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                if ($('textarea[name="comment"]').val()) {
                    $('input[name="p_COM_comment"]').val($('textarea[name="comment"]').val());
                }
                var taskId = [[${taskId}]];
                $.operate.save(prefix + "/complete/" + taskId, $('#form-colck-edit').serialize());
            }
        }
        
    </script>

    <script th:inline="javascript">
        var prefixhistory = ctx + "process/general";

        $(function() {
            var options = {
                url: prefixhistory + "/listHistory",
                fromId: 'role-form',
                queryParams: queryParams,
                sortName: "createTime",
                sortOrder: "desc",
                modalName: "审批历史",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                clickToSelect: false,
                rememberSelected: false,
                columns: [{
                    field: 'activityId',
                    title: '活动ID',
                    visible: false
                },
                    {
                        field: 'activityName',
                        title: '任务名称'
                    },
                    {
                        field: 'assignee',
                        title: '处理人ID',
                        visible: true
                    },
                    {
                        field: 'assigneeName',
                        title: '处理人'
                    },
                    {
                        field: 'isApproved',
                        title: '审批状态'
                    },
                    {
                        field: 'comment',
                        title: '审批意见'
                    },
                    {
                        field: 'startTime',
                        title: '开始时间'
                    },
                    {
                        field: 'endTime',
                        title: '结束时间'
                    },
                    {
                        field: 'durationInMillis',
                        title: '耗时',
                        formatter: function(value, row, index) {
                            if (!value) return '未知';
                            return formatTotalDateSub(value / 1000);
                        }
                    }]
            };
            $.table.init(options);
        });

        function queryParams(params) {
            var search = $.table.queryParams(params);
            search.instanceId = $("#instanceId").val();
            return search;
        }


    </script>
</body>
</html>
